<script setup>
  const formData = reactive({
    title: null,
  });

  const thumbnailImageUrl = ref(null);

  const thumbnailName = ref(null);

  function requestUpload() {

  }

  /** 上传预处理 */
  function beforeUpload(file) {
    if (file.type.indexOf("image/") == -1) {
      return proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
    }

    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      thumbnailImageUrl.value = reader.result;
      thumbnailName.value = file.name;
    };

  }
</script>

<template>

  <div class="app-container">
    <el-form style="width: 100%;" label-width="120">
      <el-row>
        <el-col :span="24">
          <el-form-item label="知识标题">
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="知识缩略图">
            <el-upload
                class="avatar-uploader"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :http-request="requestUpload"
                :show-file-list="false"
                :before-upload="beforeUpload"
            >
              <img alt="缩略图" class="thumbnail" v-if="thumbnailImageUrl" :src="thumbnailImageUrl" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="知识分类">

          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
  </div>


</template>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  display: flex;
  height: 100%;
  width: 100%;
  min-height: calc(100vh - 84px);

  .thumbnail {
    width: 80px;
    height: 80px;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
  }

  .avatar-uploader {

    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);

  }



}
</style>